<template>
  <div class="common-search-bar">
    <t-form layout="inline" reset-type="initial" :data="formData" @submit="onSubmit" @reset="onReset">
      <template v-for="(v, k) in data" :key="k">
        <t-form-item
          :name="v.name"
          :label="t(v.label)"
          :initial-data="v.value"
          label-align="right"
          :label-width="v.labelWidth || 60"
          :style="{ width: (v.width || 220) + 'px' }"
        >
          <template v-if="!v.component || v.component === 'input'">
            <t-input v-model="formData[v.name]" :disabled="v.disabled" clearable />
          </template>

          <template v-if="v.component === 'input-number'">
            <t-input-number
              v-model="formData[v.name]"
              :disabled="v.disabled"
              theme="normal"
              :input-props="{ clearable: true }"
            />
          </template>

          <template v-if="v.component === 'select'">
            <t-select v-model="formData[v.name]" :options="v.options" clearable />
          </template>

          <template v-if="v.component === 'radio-button'">
            <t-radio-group v-model="formData[v.name]" variant="default-filled">
              <t-radio-button v-for="(sv, sk) in v.options" :key="sk" :value="sv.value">{{
                t(sv.label)
              }}</t-radio-button>
            </t-radio-group>
          </template>

          <template v-if="v.component === 'daterange'">
            <t-date-range-picker v-model="formData[v.name]" allow-input clearable />
          </template>
        </t-form-item>
      </template>

      <t-form-item label-width="0">
        <t-button theme="primary" type="submit">{{ t('common.query') }}</t-button>
        <t-button theme="default" type="reset">{{ t('common.reset') }}</t-button>
        <slot name="action"></slot>
      </t-form-item>
    </t-form>
  </div>
</template>

<script lang="ts" setup>
import { PropType, ref, watch } from 'vue';

import { t } from '@/locales';

export interface SearchBarItem {
  // 组件类型
  component?: 'input' | 'input-number' | 'radio-button' | 'select' | 'daterange';
  // 字段名称
  name: string;
  // 左侧文本
  label?: string;
  // 初始值
  value?: any;
  // 是否禁用
  disabled?: boolean;
  // 选项数据，select radio-button 组件类型才生效
  options?: any[];
  // 左侧文本宽度
  labelWidth?: number;
  // 组件宽度
  width?: number;
}

const props = defineProps({
  data: {
    type: Array as PropType<SearchBarItem[]>,
    default: () => [],
  },
});
const { data } = props;

const emits = defineEmits(['search', 'reset']);

const formData = ref<Recordable>({});
watch(
  props.data,
  (val) => {
    const formDataTem: Recordable = {};
    val.forEach((item: SearchBarItem) => {
      formDataTem[item.name] = item.value !== null ? item.value : '';
    });
    formData.value = formDataTem;
  },
  { deep: true, immediate: true },
);

const onSubmit = () => {
  const data: Recordable = {};
  props.data.forEach((v: any) => {
    if ((v.component === 'radio-button' && formData.value[v.name] !== 999) || formData.value[v.name]) {
      data[v.name] = formData.value[v.name];
    }
  });
  emits('search', data);
};
const onReset = () => {
  emits('reset');
};
</script>
